<template>
	<view class="card">
		<view class="info">
			<text>姓名：{{ loginStore.expenseData.name }}</text>
			<text>性别：{{ '女' }}</text>
			<text>年龄：{{ 24 }}岁</text>
		</view>
		<view class="date">
			<text>报告日期：{{ loginStore.expenseData.operationTime }}</text>
		</view>
		<hr />
		<view class="total">
			<text>合计：</text>
			<text class="amount">
				￥{{ loginStore.expenseData.totalMoney }}
			</text>
		</view>
	</view>
</template>

<script setup>
import { useLoginStore } from '../../../store/loginStore.js'
const loginStore = useLoginStore()
</script>

<style lang="less" scoped>
.card {
	background-color: #f5f9ff;
	width: 344px;
	height: 137px;
	padding: 30rpx;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	.info {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		color: #333;
	}

	.date {
		font-size: 24rpx;
		color: #aaa;
	}

	hr {
		border: none;
		border-bottom: 1px dashed #aaa;
	}

	.total {
		text-align: end;
		font-size: 24rpx;

		.amount {
			color: red;
			font-size: 34rpx;
		}
	}
}
</style>
